import ReactDOM from "./core/ReactDOM.js"
import React from './core/react.js'

// const App = React.createElement("div", { id: "app" }, "app", "hi", "mini-react")

const Counter = ({num})=>{
  return <div>count:{num}</div>
}

let count = 0
const Contaienr = ()=>{
  const handler = ()=>{
    count+=1
    console.log('click')
    console.log(count)
    React.update()
  }
  return (
    <div>
      <Counter num={10} ></Counter>
      <button onClick={handler}>click</button>
      count:{count}
    </div>
  )
}




// const Foo = ()=>{
//   return (

//     <div>
//     <p>foo</p>
//     <FooChild></FooChild>
//   </div>
//   )
// }

let isBar = false
const UChildren = ()=>{
  const foo = (
    <div>
      foo
      <div>foo child</div>
    </div>
  )
  const bar = <div>bar</div>
  const handlerUpdate = ()=>{
    isBar = !isBar
    // cosnt React.update()
  }
  return (
    <div>

      更新节点
      {isBar && bar}
      {/* <div>{isBar ?  bar :  foo}</div> */}
      <button onClick={handlerUpdate}>更新</button>

    </div>
  )
}


let countFoo = 1
const Foo = ()=>{
  const update =  React.update()
  const handler = ()=>{
    countFoo++
    update()

  }
  return (
    <div>
      foo:{countFoo}
      <button onClick={handler}>click</button>
    </div>
  )
}

let countBar = 1
const Bar = ()=>{
  const update =  React.update()

  const handler = ()=>{
    countBar++
    update()
  }
  return (
    <div>
      bar:{countBar}
      <button onClick={handler}>click</button>
    </div>
  )
}

// 更新优化
let countMychild = 1
const Mychild = ()=>{
  const handler = ()=>{
    countMychild++
    React.update()

  }
  return (
    <div>
      Mychild:{countMychild}
      <Foo></Foo>
      <Bar></Bar>
      <button onClick={handler}>click</button>
    </div>
  )
}

const StateFc = ()=>{
  const [state,setState] = React.useState(0)
  const [bar,setBar] = React.useState("bar")
  const handlerClick = ()=>{
    setState((s)=>s+=1)
    setBar((c)=>c+"bar")
  }

  return (
    <div>
      <span>num:{state}</span>
      <div></div>
      <span>{bar}</span>
      <button onClick={handlerClick}>click</button>
    </div>
  )
}



const App = ()=>{
  return (
     <div id="app">
        hi mini-react 
      <StateFc></StateFc>
     </div>
  )
}


ReactDOM.createRoot(document.getElementById('root')).render(<App />)